<template>
  <div style="margin-top: 50px">
    <el-form :model="value" ref="goodsInfoForm" label-width="120px" class="form-inner-container"
             size="small">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="value.goodsName" placeholder="请输入商品名称"/>
      </el-form-item>
      <el-form-item label="商品编码" prop="goodsCode">
        <el-input v-model="value.goodsCode" placeholder="请输入商品编码"/>
      </el-form-item>
      <el-form-item label="商品主图" prop="img">
        <imageUpload v-model="value.img" :limit="1"/>
      </el-form-item>
      <el-form-item label="上传视频" prop="video">
        <VideoUpload v-model="value.video" :value="value.video"/>
      </el-form-item>
      <el-form-item label="视频地址" prop="videoUrl">
        <el-input v-model="value.videoUrl" placeholder="可直接填写第三方可播放视频文件地址"/>
      </el-form-item>
      <el-form-item label="所属厂家/品牌" prop="brandId">
        <!-- todo 等品牌模块好了再加 -->
        <el-input v-model="value.brandId" placeholder="请输入品牌ID"/>
      </el-form-item>
      <el-form-item label="参考价格" prop="oldPrice">
        <el-input v-model="value.oldPrice" placeholder="请输入参考价格"/>
      </el-form-item>
      <el-form-item label="实际价格" prop="price">
        <el-input v-model="value.price" placeholder="精确到分，如：6.88"/>
      </el-form-item>
      <el-form-item label="成本价格" prop="costPrice">
        <el-input v-model="value.costPrice" placeholder="精确到分，如：6.88"/>
      </el-form-item>
      <div v-if="roles.some(item => item.audit !== undefined)">
        <el-form-item label="贡献值(百分比)" prop="proffer">
          <el-input v-model="value.proffer" placeholder="填写5代表提供5%的贡献值。例如商品价格199元成本价99元用户下单后将得到5贡献值。"/>
        </el-form-item>
        <el-form-item label="利润佣金比例" prop="commissionRatio">
          <el-input v-model="value.commissionRatio" placeholder="填写5代表该商品95折。例如商品价格10元你将得到9.5。最低折扣为5%。"/>
        </el-form-item>
        <el-form-item label="利润价格比例" prop="profitRatio">
          <el-input v-model="value.profitRatio" placeholder="填写5代表该商品95折。例如商品价格10元你将得到9.5。最低折扣为5%。"/>
        </el-form-item>
        <el-form-item label="赠送积分" prop="givePoint">
          <el-input v-model="value.givePoint" placeholder="会员购买商品后返回相应积分，填写0代表不赠送"/>
        </el-form-item>
        <el-form-item label="可抵扣积分" prop="deductionPoint">
          <el-input v-model="value.deductionPoint" placeholder="请输入可抵扣积分"/>
        </el-form-item>
        <el-form-item label="开启会员等级折扣" prop="isDiscount">
          <el-radio-group v-model="value.isDiscount">
            <el-radio v-for="dict in OPEN" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item label="库存数量" prop="inventory">
        <el-input v-model="value.inventory" placeholder="请输入库存数量"/>
      </el-form-item>
      <el-form-item label="虚拟销售量" prop="virtualVolume">
        <el-input v-model="value.virtualVolume" placeholder="在实际销售量的基础上加上虚拟销售量"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="value.sort" placeholder="数字越大越排在前"/>
      </el-form-item>
      <el-form-item label="浏览量" prop="clicknum">
        <el-input v-model="value.clicknum" placeholder="请输入浏览量"/>
      </el-form-item>

      <el-form-item label="上架/下架" prop="isShow">
        <el-radio-group v-model="value.isShow">
          <el-radio v-for="dict in PUBLISH" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="供应商：" prop="supplierId">
        <treeselect v-model="value.supplierId" :options="supplierOptions" :normalizer="supplierNormalizer"
                    :show-count="true"
                    placeholder="选择供应商"/>
      </el-form-item>
      <el-form-item label="是否推荐/置顶商品" prop="isTop">
        <el-radio-group v-model="value.isTop">
          <el-radio v-for="dict in SHOW" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否为特价商品" prop="isSale">
        <el-radio-group v-model="value.isSale">
          <el-radio v-for="dict in SHOW" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('goodsInfoForm')">下一步，填写商品详情</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {getGoodsCatList} from "@/api/supplier/goodsCat";
import VideoUpload from "@/components/VideoUpload";
import {listSimpleDepts} from "@/api/system/dept";
import ImageUpload from '@/components/ImageUpload';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "GoodsInfoDetail",
  components: {
    VideoUpload,
    ImageUpload,
    Treeselect
  },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roles: this.$store.getters.roles,
      menuOptions: [],
      supplierOptions: [],
      // 数据字典
      SHOW: getDictDatas(DICT_TYPE.JKY_IS_SHOW),
      OPEN: getDictDatas(DICT_TYPE.JKY_IS_OPEN),
      PUBLISH: getDictDatas(DICT_TYPE.JKY_IS_PUBLISH),
      hasEditCreated: false,
      //选中商品分类的值
      selectProductCateValue: [],
      brandOptions: [],
      rules: {
        goodsName: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
        ],
        goodsCode: [{required: true, message: '请输入商品编码', trigger: 'blur'}],
        catId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
        price: [{required: true, message: '请输入实际价格', trigger: 'blur'}],
        costPrice: [{required: true, message: '请输入成本价格', trigger: 'blur'}],
        brandId: [{required: false, message: '请选择商品品牌', trigger: 'blur'}],
      }
    };
  },
  created() {
    this.getSupplierList()
    this.getTreeselect()
    this.getBrandList();
  },
  computed: {
    //商品的编号
    goodsId() {
      return this.value.catId;
    }
  },
  watch: {
  },
  methods: {
    supplierNormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.catId,
        label: node.catName,
        children: node.children
      };
    },
    getSupplierList() {
      listSimpleDepts().then(response => {
        this.supplierOptions = this.handleTree(response.data, "id");
      })
    },
    getTreeselect() {
      getGoodsCatList().then(response => {
        console.log('response=======',response)
        this.menuOptions = this.handleTree(response.data, "catId");
      });
    },
    getBrandList() {
    },
    handleNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('nextStep');
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
</style>
